<template>
  <div class="footer">
    <div class="f_top">
      <ul>
        <li>
          <img src="../../../assets/zgr/jiage.png" alt="">
          <span>价格公正，放心购买</span>
        </li>
        <li>
          <img src="../../../assets/zgr/pinzhi.png" alt="">
          <span> 品质保证，放心出行</span>
         </li>
        <li>
          <img src="../../../assets/zgr/chanpin.png" alt="">
          <span> 产品丰富，一站式服务</span>
        </li>
        <li>
          <img src="../../../assets/zgr/kefu.png" alt="">
          <span>专业顾问，24小时客服</span>
        </li>
      </ul>
    </div>
    <div class="f_end">
      <div class="f_e_one">
        <ul>
          <li class="f_e_one_l1">
            <div class="l1_1">
              <img src="../../../assets/zgr/电话%20(1).png" alt="" width="40px" height="40px">
              <div>
                <p>消费者服务</p>
                <p>同程投诉受理电话：95711</p>
                <p>同程投诉受理邮箱：tcfwfxbz@ly.com</p>
              </div>
            </div>
            <div class="l1_2">
              <img src="../../../assets/zgr/mail.png" alt="">
              <div>
                <p>
                  意见反馈

                </p>
              </div>
            </div>
          </li>
          <li class="f_e_one_l2">
            <ul>
              <li> <h4>意见反馈</h4></li>
              <li>关于同程</li>
              <li>同程简介</li>
              <li>可信网站</li>
              <li>网站地图</li>
              <li>业务资质</li>
              <li>用户协议与隐私条款</li>
              <li>同程知识产权保护承诺</li>
              <li>同程知识产权侵权投诉流程</li>
            </ul>
          </li>
          <li class="f_e_one_l3">
            <ul>
              <li>合作加盟</li>
              <li>商旅合作</li>
              <li>旅游保险</li>
              <li>网站联盟</li>
              <li>门票合作</li>
              <li>机票合作</li>
              <li>旅游实体门店加盟</li>
              <li></li>

            </ul>
          </li>
          <li class="f_e_one_l4">
            <ul>
              <li>联系我们</li>
              <li>联系我们</li>
              <li>投诉建议</li>
              <li>城聘英才</li>
              <li>廉政举报平台</li>
              <li></li>
              <li></li>
              <li></li>

            </ul>
          </li>
          <li class="f_e_one_l5">
            <h4>同程旅行app</h4>
            <img src="../../../assets/zgr/app.png" alt="">
            <span>手机预定更优惠</span>
          </li>
        </ul>
      </div>
      <div class="f_e_two">
        <div class="content-container">
          <div class="hot-recommend">
            <a href="#">热点推荐</a>
            <a href="#">迪拜旅游</a>
            <a href="#">泰国旅游</a>
            <a href="#">巴厘岛旅游</a>
            <a href="#">普吉岛旅游</a>
            <a href="#">柬埔寨旅游</a>
            <a href="#">日本旅游</a>
            <a href="#">斯里兰卡旅游</a>
            <a href="#">泰国六日游</a>
            <a href="#">长滩岛旅游</a>
            <a href="#">马尔代夫旅游</a>
            <a href="#">越南旅游</a>
            <a href="#">夏威夷旅游</a>
            <a href="#">塞班岛旅游</a>
            <a href="#">新西兰旅游</a>
            <a href="#">欧洲旅游</a>
          </div>
          <div class="friend-links">
            <a href="#">友情链接</a>
            <a href="#">QQ钱包</a>
            <a href="#">TripAdvisor</a>
            <a href="#">户外运动</a>
            <a href="#">同驿商城</a>
            <a href="#">地图查找</a>
            <a href="#">欣欣旅游网</a>
            <a href="#">米胖网</a>
            <a href="#">长岛旅游</a>
            <a href="#">劲旅网</a>
            <a href="#">天气网</a>
            <a href="#">北京中国国旅</a>
            <a href="#">中国签证资讯网</a>
            <a href="#">穷游网</a>
            <a href="#">旅游新媒体</a>
            <a href="#">中国经济网</a>
            <a href="#">酒店预订</a>
          </div>
        </div>
      </div>

      <div class="f_e_three">
        <div class="footer-container">
          <p>Copyright © 2002-2025 版权所有 同程网络科技股份有限公司</p>
          <p>经营许可证编号：合字82-20180016  备案序号：苏ICP备09033604号 <span>苏公网安备32059002001003号</span></p>
          <p>旅行社业务许可证：L-JS-CJ00070</p>
          <p>
            <a href="#">旅游网站诚信建设承诺书</a>
            <a href="#">旅游网站守法诚信责任状</a>
            <a href="#">违规失信举报热线：4007-777-777转9</a>
          </p>
          <p>国家文旅部全国旅游投诉热线：拨打12345，或登录全国旅游网络投诉举报平台</p>
          <p>网站网违法和不良信息举报 邮箱：jgj@lly.com</p>
          <div class="certificate-container">
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  name: 'tofooter'
}
import { ref } from 'vue'

const activeName = ref('1')
</script>
<style scoped>
.footer{
  width: 100%;
  padding-bottom: 10px;

}
.f_top{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height:74px;
  line-height:74px;
  background-color: #F5F5F5;
}
.f_top img, .f_top span{

}
.f_top img{
  width: 34px;
  height: 34px;
  margin-right: 10px;
}
.f_top ul{
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 1190px;

}
.f_top ul li{
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666666;
  border-right: 1px solid #e5e5e5;
  width: 296px;
  height: 40px;
  justify-content: center;
  line-height: 40px;

}
.f_end{
  width: 100%;
  height: 567px;
  background-color: #484848;

}
.f_end div{
  margin: 0 auto;

}
.f_e_one{
  width:1060px;
  height: 230px;
  background-color: #484848;
}
.f_e_one ul{
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 1060px;
  height: 230px;
}
.f_e_one ul li{
  width: 330px;
  height: 156px;
}
.f_e_one_l1{
  width: 325px;
  height: 230px;

}

.l1_1{
  width: 330px;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.l1_1 img {
  width: 30px;
  height: 30px;
}
.l1_2 img{
  height: 40px;
  width: 40px;

}
.l1_1 div{
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
.l1_1 div p{
  font-size: 13px;
  color: #ffffff;
  margin-top: 5px;

}
.l1_2 {
  width: 330px;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;

}
.l1_2 div{
  width: 250px;
  height: 40px;
  display: flex;
  font-size: 12px;
  color: #666666;
  align-items: center;
}
.l1_2 div p{
  font-size: 13px;
  color: #ffffff;

}


.f_e_one_l2,.f_e_one_l3,.f_e_one_l4{
  width: 195px;
  height: 208px;
}
.f_e_one_l2 ul,.f_e_one_l3 ul,.f_e_one_l4 ul{
  width: 195px;
  height: 170px;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.f_e_one_l2 ul li,.f_e_one_l3 ul li,.f_e_one_l4 ul li{
  width: 195px;
  color: #C8C5C8;
  font: normal normal normal 12px 'Microsoft YaHei', Arial, sans-serif
}

.f_e_one_l5{
  width: 95px;
  height: 150px;
}
.f_e_one_l5 h4{
  font-size: 15px;
  color: #ffffff;
  margin-bottom: 10px;
}
.f_e_one_l5 img{
  width: 95px;
  height: 95px;
}
.f_e_one_l5 span{
  font-size: 13px;
  color: #ffffff;
  margin-top: 5px;
  display: block;
}
.f_e_two{
  width:1190px;
  height: 95px;
  background-color: #484848;
  display: flex;
  align-items: center;
  border-top: 1px solid #6b778c;
}
.content-container {
  font-family: Arial, sans-serif;
  color: #888888; /* 文字颜色设为白色，可根据背景调整 */
}
.hot-recommend,
.friend-links {
  margin-bottom: 10px;
}
.hot-recommend span,
.friend-links span {
  margin-right: 10px;
}
.hot-recommend a,
.friend-links a {
  font-size: 12px;
  color: #888888;
  text-decoration: none;
  margin-right: 15px;
  display: inline-block;
  transition: color 0.3s ease; /* 链接颜色过渡效果 */
}
.hot-recommend a:hover,
.friend-links a:hover {
  color: #ffffff; /* 鼠标悬停时链接变色 */
}
.f_e_three{
  height: 212px;
  background-color: #3C3C3C;
}
.footer-container {
  padding-top: 20px;
  width: 1190px;
  height: 148px;
  font-family: Arial, sans-serif;
  color: rgba(204, 204, 204, 0.35); /* 文字颜色 */
}
.footer-container p {
  margin: 7px 0;
  font-size: 12px;

}
.footer-container span {
  margin-left: 10px;
}
.footer-container a {
  color: rgba(204, 204, 204, 0.35); /* 文字颜色 */

  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-container a:hover {
  color: #ffffff;
}
.certificate-container img {
  margin: 0 10px;
}
</style>